import React, {useState} from 'react'
import {Swiper, SwiperItem, View, Image, Text, ScrollView} from '@tarojs/components'
import Nav from '@/components/Nav/Nav'
import {useReady, useRouter} from '@tarojs/taro'
import {getBanner, getFoodDetail, getRecommendFoodie} from '@/packageA/api/food'
import './Food.scss'


interface FoodItem {
  foodName: string
  id: string
  imgUrl: string
}

interface RecommendFoodie {
  id: string
  likeNum: string
  nickname: string
  sightName: string
  avatarUrl: string
}

const Food: React.FC = () => {

  const {params: {id = '123456', title}} = useRouter<{id: string, title: string}>()
  const [foodList, setFoodList] = useState<FoodItem[]>([])
  const [bannerList, setBannerList] = useState<string[]>([])
  const [FoodieList, setFoodieList] = useState<RecommendFoodie[]>([])

  useReady(() => {
    getFoodDetail(id, 0, 10).then(res => {
      setFoodList(res)
    })
    getBanner(id).then(res => {
      setBannerList(res)
    })
    getRecommendFoodie(id).then(res => {
      setFoodieList(res)
      console.log(res)
    })
  })

  return <View className='container'>
    <Nav text={title} color='#000' />
    <View className='food_box' />
    <Swiper
      circular
      autoplay
      previousMargin='22px'
      nextMargin='22px'
      className='swiper'
    >
      {
        bannerList.map((banner, index) => <SwiperItem className='swiper_item' key={banner + index}>
          <Image src={banner} className='bg_image' />
        </SwiperItem>)
      }
    </Swiper>

    <View className='food_wrap'>
      <View className='food_recommend'>
        <Text className='food_recommend_title'>美食博主推荐</Text>
        <Text className='iconfont food_recommend_icon'>&#xe88e;</Text>
      </View>
    </View>

    <View className='blogger_wrap'>
      {
        FoodieList.map(Foodie => <View className='blogger_item' key={Foodie.id}>
          <Image className='blogger_item_img' src={Foodie.avatarUrl} />
          <View className='blogger_content'>
            <View className='blogger_item_title'>{Foodie.nickname}</View>
            <Text className='iconfont blogger_item_icon'>&#xe622;</Text>
            <View className='blogger_item_content'>{Foodie.sightName}</View>
            <Text className='iconfont blogger_item_icon'>{Foodie.likeNum} &nbsp;&#xe601;</Text>
          </View>
        </View>)
      }
    </View>

    <View className='food_wrap'>
      <View className='food_recommend'>
        <Text className='food_recommend_title'>网红美食</Text>
        <Text className='iconfont food_recommend_icon'>&#xe88e;</Text>
      </View>
    </View>

    <View>
      <ScrollView enableFlex
        scrollX
        className='scroll_view'
        enhanced
        showScrollbar={false}
      >
        {
          foodList.map(food => <View className='scroll_view_item' key={food.id}>
            <Image className='scroll_view_item_img' src={food.imgUrl} />
            <Text className='scroll_view_item_content'>{food.foodName}</Text>
          </View>)
        }
      </ScrollView>
    </View>
    {/*<SendInput*/}
    {/*  focus*/}
    {/*  sendInputs={inputIcons}*/}
    {/*  cursorSpacing={10}*/}
    {/*  onclick={onclick}*/}
    {/*  showComment={showComment}*/}
    {/*/>*/}
  </View>
}

export default Food
